<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<view v-if="isLogin" class="body">				
			<view class="step-bar">
				<view class="fix-wrap">
					<view class="item active">
						<view class="icon iconfont">&#xe8cc;</view>
						<text class="text">基本信息</text>
					</view>
					<view class="item">
						<view class="icon iconfont f-s38">&#xe621;</view>
						<text class="text">上传合同</text>
					</view>
					<view class="item">
						<view class="icon iconfont">&#xec35;</view>
						<text class="text">阶段任务</text>
					</view>
					<view class="item">
						<view class="icon iconfont">&#xe659;</view>
						<text class="text">回款计划</text>
					</view>
					<view class="item">
						<view class="icon iconfont">&#xeb67;</view>
						<text class="text">发送审批</text>
					</view>
				</view>	
			</view>
			<!-- 创建 -->
			<template v-if="type=='add'">
				<view class="project-form-wrap m-b2">
					<view class="hd-title">基本信息</view>
					<view class="form-wrap m-b2">
						<view class="form-item">
							<view class="label">项目名称：</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" v-model="params.project_name" placeholder="输入项目名称" />
								</view>				
							</view>			
						</view> 
						<view class="form-item">
							<view class="label">项目编号：</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" v-model="params.project_code" placeholder="输入项目编号" />
								</view>				
							</view>			
						</view>
						<view class="form-item">
							<view class="label">项目金额：</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" v-model="params.amount" placeholder="输入项目金额" />
								</view>				
							</view>			
						</view>
						<view class="form-item">
							<view class="label">项目省份：</view>
							<picker class="form-picker" mode="selector" :range="proviceList" range-key="name" @change="changeProvice">
								<view class="picker">
									<input v-model="params.province_name" placeholder="选择省份" disabled class="select-data t-r">
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 
						<view class="form-item">
							<view class="label">实施单位：</view>
							<picker class="form-picker" mode="selector" :range="companyList" range-key="label" @change="changeCompany">
								<view class="picker">
									<input v-model="params.implementation_name" placeholder="选择实施单位" disabled class="select-data t-r"> 
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 
						<view class="form-item">
							<view class="label">项目类型：</view>
							<picker class="form-picker" mode="selector" :range="projectType" range-key="label" @change="changeProjectType">
								<view class="picker">
									<input v-model="params.project_type_name" placeholder="选择项目类型" disabled class="select-data t-r">  
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 
						<view class="form-item">
							<view class="label">期限类型：</view>
							<picker class="form-picker" mode="selector" :range="termTypeList" range-key="label" @change="changeTeamType">
								<view class="picker">
									<input v-model="params.term_type_name" placeholder="选择期限类型" disabled class="select-data t-r">  
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 
						
						<view class="form-item">
							<view class="label">开始时间：</view>
							<picker class="form-picker" mode="date" @change="changeDate(1,$event)">
								<view class="picker">
									<input v-model="params.start_time" placeholder="选择开始时间" disabled class="select-data t-r">   
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 
						
						<view class="form-item">
							<view class="label">结束时间：</view>
							<picker class="form-picker" mode="date" @change="changeDate(2,$event)">
								<view class="picker">
									<input v-model="params.end_time" placeholder="选择结束时间" disabled class="select-data t-r">  
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 
						
						<view class="form-item">
							<view class="label">签署日期：</view>
							<picker class="form-picker" mode="date" @change="changeDate(3,$event)">
								<view class="picker">
									<input v-model="params.signature_time" placeholder="选择签署时间" disabled class="select-data t-r">   
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 
						
						<view class="form-textarea-item">
							<view class="label a-t">备注信息</view>
							<view class="form-textarea">
								<textarea class="inp-textarea" v-model="params.remarks" placeholder="备注信息(选填)" maxlength="-1"></textarea>
							</view>
						</view> 
					</view>
				</view>
				
				<view class="project-form-wrap">
					<view class="hd-title">项目对接人</view>
					<view class="form-wrap m-b2">
						<view class="form-item">
							<view class="label">姓 名：</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" v-model="params.interlocutors" placeholder="输入项目对接人名称" />
								</view>				
							</view>			
						</view>  
						<view class="form-item">
							<view class="label">联系手机：</view>
							<view class="form-input">
								<view class="content">
									<input type="number" class="inp" v-model="params.interlocutors_mobile" placeholder="输入联系人手机" />
								</view>				
							</view>			
						</view>
					</view>
				</view>
				
				<view class="project-form-wrap">
					<view class="hd-title">业主信息</view>
					<view class="form-wrap m-b2">
						<view class="form-item">
							<view class="label">业主名称：</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" v-model="params.opposite_part" placeholder="输入业主名称" />
								</view>				
							</view>			
						</view> 
						<view class="form-item">
							<view class="label">联系人：</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" v-model="params.contacts" placeholder="输入联系人名称" />
								</view>				
							</view>			
						</view>
						<view class="form-item">
							<view class="label">联系手机：</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" v-model="params.contact_mobile" placeholder="输入联系人手机" />
								</view>				
							</view>			
						</view>
					</view>
				</view>
						
			</template>
			
			<!-- 编辑 -->
			<template v-if="type=='edit'">
				<template v-if="loadingState.default">
					<c-loading :loadingState="loadingState"></c-loading>
				</template>
				
				<template v-else>
					<view class="project-form-wrap m-b2">
						<view class="hd-title">基本信息</view>
						<view class="form-wrap m-b2">
							<view class="form-item">
								<view class="label">项目名称：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="params.project_name" placeholder="输入项目名称" />
									</view>				
								</view>			
							</view> 
							<view class="form-item">
								<view class="label">项目编号：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="params.project_code" placeholder="输入项目编号" />
									</view>				
								</view>			
							</view>
							<view class="form-item">
								<view class="label">项目金额：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="params.amount" placeholder="输入项目金额" />
									</view>				
								</view>			
							</view>
							<view class="form-item">
								<view class="label">项目省份：</view>
								<picker class="form-picker" mode="selector" :range="proviceList" range-key="name" @change="changeProvice">
									<view class="picker">
										<input v-model="params.province_name" placeholder="选择省份" disabled class="select-data t-r">
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 
							<view class="form-item">
								<view class="label">实施单位：</view>
								<picker class="form-picker" mode="selector" :range="companyList" range-key="label" @change="changeCompany">
									<view class="picker">
										<view class="select-data t-r">{{params.implementation_name}}</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 
							<view class="form-item">
								<view class="label">项目类型：</view>
								<picker class="form-picker" mode="selector" :range="projectType" range-key="label" @change="changeProjectType">
									<view class="picker">
										<view class="select-data t-r">{{params.project_type_name}}</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 
							<view class="form-item">
								<view class="label">期限类型：</view>
								<picker class="form-picker" mode="selector" :range="termTypeList" range-key="label" @change="changeTeamType">
									<view class="picker">
										<view class="select-data t-r">{{params.term_type_name}}</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 
							
							<view class="form-item">
								<view class="label">开始时间：</view>
								<picker class="form-picker" mode="date" @change="changeDate(1,$event)">
									<view class="picker">
										<view class="select-data t-r">
											<text v-if="params.start_time">{{params.start_time}}</text>
											<text v-else class="f-grey">选择开始时间</text>
										</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 
							
							<view class="form-item">
								<view class="label">结束时间：</view>
								<picker class="form-picker" mode="date" @change="changeDate(2,$event)">
									<view class="picker">
										<view class="select-data t-r">
											<text v-if="params.end_time">{{params.end_time}}</text>
											<text v-else class="f-grey">选择结束时间</text>
										</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 
							
							<view class="form-item">
								<view class="label">签署日期：</view>
								<picker class="form-picker" mode="date" @change="changeDate(3,$event)">
									<view class="picker">
										<view class="select-data t-r">
											<text v-if="params.signature_time">{{params.signature_time}}</text>
											<text v-else class="f-grey">选择签署日期</text>
										</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 
							
							<view class="form-textarea-item">
								<view class="label a-t">备注信息</view>
								<view class="form-textarea">
									<textarea class="inp-textarea" v-model="params.remarks" placeholder="备注信息(选填)" maxlength="-1"></textarea>
								</view>
							</view> 
						</view>
					</view>
					
					<view class="project-form-wrap">
						<view class="hd-title">项目对接人</view>
						<view class="form-wrap m-b2">
							<view class="form-item">
								<view class="label">姓 名：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="params.interlocutors" placeholder="输入业主名称" />
									</view>				
								</view>			
							</view>  
							<view class="form-item">
								<view class="label">联系手机：</view>
								<view class="form-input">
									<view class="content">
										<input type="number" class="inp" v-model="params.interlocutors_mobile" placeholder="输入联系人手机" />
									</view>				
								</view>			
							</view>
						</view>
					</view>
					
					<view class="project-form-wrap">
						<view class="hd-title">业主信息</view>
						<view class="form-wrap m-b2">
							<view class="form-item">
								<view class="label">业主名称：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="params.opposite_part" placeholder="输入业主名称" />
									</view>				
								</view>			
							</view> 
							<view class="form-item">
								<view class="label">联系人：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="params.contacts" placeholder="输入联系人名称" />
									</view>				
								</view>			
							</view>
							<view class="form-item">
								<view class="label">联系手机：</view>
								<view class="form-input">
									<view class="content">
										<input type="number" class="inp" v-model="params.contact_mobile" placeholder="输入联系人手机" />
									</view>				
								</view>			
							</view>
						</view>
					</view>
				</template>
			</template>
			
		</view> 
		<template v-if="type=='edit'">
			<view v-if="!loadingState.default" class="footer">
				<view class="fix-wrap created-btn-wrap">
					<view class="btn submit-btn" @click="submit">保存编辑</view> 
				</view>
			</view>
		</template>
		
		<template v-if="type=='add'">
			<view class="footer">
				<view class="fix-wrap created-btn-wrap">
					<view class="btn submit-btn" @click="submit">创建项目</view> 
				</view>
			</view>
		</template>
		
	</view>
</template>

<script> 
	export default {
		data() {
			return {
				isIphoneX:getApp().globalData.isIphoneX,
				isLogin: false,
				companyList:[],
				projectType:[],
				termTypeList:[],
				proviceList:[],
				id:'',
				type:'',
				params:{
					project_name: '',
					project_code: '',
					company_name:'',
					company_id:'0',
					project_type_id:'0',
					project_type_name:'',
					term_type_id:'0',
					term_type_name:'',
					start_time:'',
					end_time:'',
					signature_time:'', 
					amount: '', 
					remarks: '',
					status:'',
					opposite_part: '',
					contacts: '',
					contact_mobile: '',
					interlocutors:'',
					interlocutors_mobile:'',
					province_name:'',
					province_id:'',
					implementation_unit:'',
					implementation_name:''
				},
				isStop:true,
				loadingState:{
					default:true
				}
			}
		},
		async onLoad(params) { 
			this.isLogin=await this.$loginState('check');
			this.id=params.id; 
			this.type=params.type;
			
			if(this.type=='edit'){
				uni.setNavigationBarTitle({
					title:'编辑项目'
				})
			}else{
				uni.setNavigationBarTitle({
					title:'创建项目'
				})
			}
			
			if(this.isLogin){ 
				// 项目类型
				this.projectType=await this.getProjectType();
				// 实施单位
				this.companyList=await this.companylistsel();
				this.proviceList=await this.regionnext();
				 
				
				if(this.type=='add'){					
					 
				} 
				if(this.type=='edit'){
					this.getDetail(); 
				} 
			}
			 
					
			
			
			// 项目期限类型
			this.termTypeList=this.$mock_data.term_type_list; 
		},
		methods: {
			
			
			async regionnext(){
				let res=await this.$api.user_api.regionnext(); 
				if(res.data.code==200){
					return res.data.data					 
				}
			},
			
			changeProvice(e){ 
				let index=e.target.value;
				this.params.province_name=this.proviceList[index].name;
				this.params.province_id=this.proviceList[index].id;
			},
			
			async companylistsel(){
				let res=await this.$api.user_api.companylistsel(); 
				if(res.data.code==200){
					return res.data.data					 
				}
			},
			
			// 获取项目类型
			async getProjectType(){
				let res=await this.$api.user_api.projectType({
					page:1,
					limit:100
				})  
				console.log(res)
				if(res.data.code==200){ 
					return res.data.data;
				}
			},
			
			// 获取项目详情
			async getDetail(){
				let res=await this.$api.user_api.projectInfo({
					id:this.id
				}) 
				if(res.data.code==200){
					this.loadingState.default=false; 
					
					this.params.project_name=res.data.data.project_name;
					this.params.project_code=res.data.data.project_code;
					this.companyList.forEach(item=>{
						if(item.value==res.data.data.department_id){
							this.params.company_id=item.value;
							this.params.company_name=item.label; 
						}
					}) 
					this.projectType.forEach(item=>{
						if(item.value==res.data.data.department_id){
							this.params.project_type_id=item.value;
							this.params.project_type_name=item.label;  
						}
					}) 
					this.termTypeList.forEach(item=>{
						if(item.value==res.data.data.department_id){
							this.params.term_type_id=item.value;
							this.params.term_type_name=item.label; 
						}
					})  
					this.params.status=res.data.data.status;
					this.params.start_time=res.data.data.format_start_time;
					this.params.end_time=res.data.data.format_end_time;
					this.params.signature_time=res.data.data.format_signature_time;
					this.params.amount=res.data.data.amount;
					this.params.remarks=res.data.data.remarks;
					this.params.opposite_part=res.data.data.opposite_part;
					this.params.contacts=res.data.data.contacts;
					this.params.contact_mobile=res.data.data.contact_mobile;
					this.params.interlocutors=res.data.data.interlocutors;
					this.params.interlocutors_mobile=res.data.data.interlocutors_mobile;
					this.params.province_name=res.data.data.province_name;
					this.params.province_id=res.data.data.province_id;
				}
			},
			
			// 切换实施单位
			changeCompany(e){ 
				console.log(e)
				this.params.implementation_unit=this.companyList[e.target.value].value;
				this.params.implementation_name=this.companyList[e.target.value].label;
			},
			
			// 切换项目类型id
			changeProjectType(e){ 
				this.params.project_type_id=this.projectType[e.target.value].value;
				this.params.project_type_name=this.projectType[e.target.value].label; 
			},
			
			// 切换期限类型
			changeTeamType(e){ 
				this.params.term_type_id=this.termTypeList[e.target.value].value;
				this.params.term_type_name=this.termTypeList[e.target.value].label; 
			},
			
			// 选择日期
			changeDate(type,e){ 
				if(type==1){
					this.params.start_time=e.target.value;
				}else if(type==2){
					this.params.end_time=e.target.value;
				}else if(type==3){
					this.params.signature_time=e.target.value;
				}
			},
			
			// 创建项目
			async submit(){
				let _this=this;
				let {
					project_name,
					company_id,
					start_time,
					end_time,
					project_type_id,
					signature_time,
					project_code,
					amount,
					term_type_id,
					remarks,
					opposite_part,
					contacts,
					contact_mobile, 
					status,
					interlocutors,
					interlocutors_mobile,
					province_id,
					implementation_unit
				} = this.params;
				
				if(project_name==''){
					this.$showToast({
						title:'请输入项目名称',
					})
					return
				}
				if(province_id==''){
					this.$showToast({
						title:'请选择项目省份',
					})
					return
				}
				
				if(amount==''){
					this.$showToast({
						title:'请输入项目合同金额',
					})
					return
				}
				
				if(start_time==''){
					this.$showToast({
						title:'请输入项目开始时间',
					})
					return
				}
				
				if(end_time==''){
					this.$showToast({
						title:'请输入项目结束时间',
					})
					return
				}
				
				if(signature_time==''){
					this.$showToast({
						title:'请输入合同签署时间',
					})
					return
				}
				
				if(opposite_part==''){
					this.$showToast({
						title:'请输入业主单位名称',
					})
					return
				}  
				 
				if(this.isStop){
					this.isStop=false; 
					// 创建项目
					if(this.type=='add'){
						let res = await this.$api.project_api.addProject({
							project_name,
							department_id:company_id,
							start_time,
							end_time,
							project_type:project_type_id,
							signature_time,
							project_code,
							amount,
							term_type:term_type_id,
							remarks,
							opposite_part,
							contacts,
							contact_mobile,
							interlocutors,
							interlocutors_mobile,
							province_id,
							implementation_unit
						}); 
						if (res.data.code == 200) {
							this.$showToast({
								icon:'success',
								title:'项目创建成功',
								duration:1000,
							}).then(()=>{
								this.$store.commit('PROJECT_LIST_UPDATE',1);
								setTimeout(()=>{
									uni.redirectTo({
										url:'/package_project/created_step-2/created_step-2?id=' + res.data.id
									})
								},1000)
							})
							this.isStop=true; 
						} else {
							this.$showToast({
								icon:'error',
								title:res.data.msg,
							}) 
							this.isStop=true; 
						}
					}
					
					// 编辑项目
					if(this.type=='edit'){
						let res = await this.$api.project_api.editProject({
							id:this.id,
							project_name,
							department_id:company_id,
							start_time,
							end_time,
							project_type:project_type_id,
							signature_time,
							project_code,
							amount,
							term_type:term_type_id,
							remarks,
							status,
							opposite_part,
							contacts,
							contact_mobile,
							provice_id
						}); 
						if (res.data.code == 200) {
							this.$showToast({
								icon:'success',
								title:'编辑成功',
								duration:1000,
							}).then(()=>{
								this.$store.commit('PROJECT_LIST_UPDATE',1);
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},1000)
							})
							this.isStop=true; 
						} else {
							this.$showToast({
								icon:'error',
								title:res.data.msg,
							}) 
							this.isStop=true; 
						}
					}
					
				}
				
			}
			
			
		}
	}
</script>

<style lang="less" scoped>
	.project-form-wrap{
		padding: 20rpx 0 0;
		background: #fff;
	}
	.hd-title{
		margin:0 20rpx 20rpx;
		padding-left:20rpx;
		border-left: 8rpx solid #0099ff;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.created-btn-wrap{
		display: flex;
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			margin: 10rpx 10rpx 0;
			flex-grow: 1;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			color:#fff;
		}
		.next-btn{
			background: #ff9600; 
		}
		.submit-btn{
			background: #0099ff; 
		}
	} 
	.step-bar{
		height: 90rpx;
		margin-bottom: 20rpx;
		.fix-wrap{
			display: flex;
			height: 90rpx;
			background: #fff;
		}
		.item{
			flex-grow: 1;
			width: 25%;
			text-align: center;
			color:#999;
			.text{
				font-size: 28rpx;				
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
				margin:0 auto 0; 
			}
		}
		.active{
			.text,.icon{
				color:#09f;				
			} 
		}
	}
</style>
